<template>
	<view>
		<search></search>
		<jh-swiper></jh-swiper>
		<notice></notice>
		<funMenu></funMenu>
		<u-gap height="20" bgColor="#F3F4F6"></u-gap>
		<u-sticky offset-top="0">
			<tabs :titles="['推荐','车评']" class="tabsEle" @itemClick='tabschange'></tabs>
		</u-sticky>
		<view v-show="tabsCurr==0" class="margin">
			<flow :list="carList"></flow>
		</view>
		<comment v-show="tabsCurr==1"  class="padding"></comment>
		<u-loadmore :status="loadingText.status" :loading-text="loadingText.inLoading"
			:loadmore-text="loadingText.beforeLoading" :nomore-text="loadingText.nomoreText" :height="40"
			v-show='carList.length>=params.limit' />
	</view>
</template>

<script>
	import {
		get_car
	} from '@/api/contents/buyCar/buyCar.js'


	import search from '@/components/home/search/search.vue'
	import jhSwiper from '@/components/home/jh-swiper/jh-swiper.vue'
	import notice from '@/components/home/notice/notice.vue'
	import funMenu from '@/components/home/funMenu/funMenu.vue'
	import tabs from '@/components/common/tabs/tabs.vue'
	import foundCar from '@/components/home/foundCar/foundCar.vue'
	import goodList from '@/components/common/goodList/goodList.vue'
	import flow from '@/components/common/flow/flow.vue'
	import comment from '@/components/home/comment/comment.vue'
	export default {
		components: {
			search,
			jhSwiper,
			notice,
			funMenu,
			tabs,
			foundCar,
			goodList,
			flow,
			comment
		},
		data() {
			return {
				tabsCurr: 0, //切换的tabs index
				isFixedTop: false, //是否吸顶
				tabsposition: 0, //tabs位置
				carList: [], //汽车列表
				params: {
					limit: 10,
					page: 1
				},
				loadingText: {
					inLoading: '努力加载中',
					beforeLoading: '上拉加载更多',
					nomoreText: '没有更多了',
					status: 'loadmore'
				}
			}
		},
		methods: {
			tabschange(index) {
				if (index == 0)  {
					this.params.page = 1;
					this.carList = [];
					this.getCarInfo();
				}
				this.tabsCurr = index;
				
			},
			getCarInfo() {
				get_car(this.params).then(res => {
					if (res.code == 0) {
						if (res.data.list) {
							this.carList = [...this.carList, ...res.data.list]
							this.loadingText.status = 'loadmore';
						} else {
							this.loadingText.status = 'nomore'
						}
					}
				})
			}
		},
		onLoad() {
			this.getCarInfo();
		},
		onReachBottom() {
			this.loadingText.status = 'loading';
			this.params.page++;
			if (this.tabsCurr == 0) {
				this.getCarInfo();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.margin {
		padding: 20upx 20upx 0;
		background: #F5F7FA;

		.title {
			height: 80upx;
			line-height: 80upx;
			font-size: 32upx;
			color: #303741;
			letter-spacing: 0;
			font-weight: 700;
		}
	}

	.padding {
		padding: 0 30upx;
	}
</style>
